<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Grid</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="./css/table.css" />
		<script type="text/javascript" src="./js/vue.js"></script>
		<script src="js/axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<input placeholder="请输入单词" @input="search" v-model="value" type="text"/>
			<table class="table">
				<thead>
					<th>English</th>
					<th>Chinese</th>
					<th>datatime</th>
				</thead>
				<tbody class="showdata">
					<tr v-for="(item) in showList">
						<td>{{item.English}}</td>
						<td>{{item.Chinese}}</td>
						<td>{{item.datetime}}</td>
					</tr>
				</tbody>
			</table>
			<footer v-if="wordList.length>0" class="footer">
				<div class="flow-y">
					<div style="color: yellow;">
						<span>csdn：</span>
						<span><a href="https://blog.csdn.net/chengqige" style="color: yellow;">程麒阁的博客</a></span>
					</div>
					<div style="margin-top:4px;color: yellow;">
						<span>vue.js：</span>
						<span><a href="http://cqg001.gitee.io/tuling/Vue.js" style="color: yellow;">Vue笔记</a></span>
					</div>
				</div>
				<div class="connect">
					<div class="about">
						<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3320938770&site=qq&menu=yes">
							<img src="./img/qq.png" width="50" />
						</a>
						<div style="font-size: 14px;">加QQ</div>
					</div>
					<div class="about" style="margin-left: 5px;" @click="showQRcode">
						<a>
							<img src="./img/miniprograme.png" width="50" />
						</a>
						
						<div style="font-size: 14px;">莲伊</div>
					</div>
					<div class="about" style="margin-left: 5px;">
						<a href="https://jq.qq.com/?_wv=1027&k=u0whFE2A">
							<img src="./img/反馈.png" width="50" />
						</a>
						<div style="font-size: 14px;">反馈群</div>
					</div>
				</div>
			</footer>
			<div :class="over" @click="hide">

			</div>
			<div :class="code">
				<img src="./img/lianyi.jpg" width="80%" style="border-radius: 50%;"/>
				<div style="color: #008000;font-size: 20px;">莲伊小程序</div>
			</div>
		</div>


		<script>
			var app = new Vue({
				el: '#app',
				data: {
					value:'',
					over: 'overhide',
					code: 'QRcodeHide',
					mode:0,
					wordList: [],
					dataList:[]
				},
				created() {
					this.initData()
				},
				computed:{
					showList(){
						let dataList=this.wordList
						switch(this.mode){
							case 0:
								return dataList
							case 1:
								return dataList.filter((item)=>{
									if(item.English.indexOf(this.value)>=0){
										return item
									}
								})
						}
					}
				},
				methods: {
					initData() {
						axios.get('./words.json').then(res => {
							console.log(res.data)
							this.wordList = res.data
                            alert("本单词库来源于xxx词典")
						})
					},
					search(){
						console.log("正在查找"+this.value)
						this.mode=1
						if(this.value==""){
							this.mode=0
						}
					},
					showQRcode() {
						this.over = 'overlow'
						this.code = 'QRcode'
					},
					hide() {
						this.over = 'overhide'
						this.code = 'QRcodeHide'
					}
				}
			})
		</script>
	</body>
</html>
